<template>
    <view 
        v-show="togglePB"
        catchtouchmove="true"
        class="zz-pop-bottom20200730">
        <!-- mask -->
        <view 
            class="mask" 
            :class="[visibleSync?'showMask':'hideMask']"
            @click.stop="closePop"></view>
        <!-- content -->
        <view
            :style="popHeight"
            class="content"
            :class="[visibleSync?'showContent':'hideContent']">
            <!-- title -->
            <view class="content_title clamp">
                <slot name="title"></slot>
            </view>
            <!-- content -->
            <scroll-view scroll-y class="content_in">
                <view class="content_in_box">
                    <slot name="content"></slot>
                </view>
            </scroll-view>
            <!-- footer -->
            <view class="content_footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        height:{
            type:String,
            default:"980rpx"
        }
    },
    computed:{
        popHeight(){
            return [{
                "height":this.height,
                "max-height":this.height
            }];
        }
    },
    data(){
        return {
            togglePB:false,  //显示弹层
            visibleSync:false  //显示内容
        };
    },
    watch:{
        visible(val){
            if(val){
                this.togglePB = true;
                this.visibleSync = true;
            }else{
                this.closePop();
            }
        }
    },
    methods:{
        /* 关闭弹层 */
        closePop(){
            this.visibleSync = false;
            this.ZZsetTimeout(()=>{
                this.togglePB = false;
                this.$emit("close");
            },300);
        }
    }
}
</script>
<style lang="scss">
.zz-pop-bottom20200730 {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    /*  */
    .mask {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,.5);
        opacity:0;
        &.showMask {
            animation:showMask .2s ease-in both;
        }
        &.hideMask {
            animation:hideMask .2s ease-in both;
        }
    }
    /* content */
    .content {
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        /* padding:0rpx 24rpx; */
        border-radius:16rpx 16rpx 0rpx 0rpx;
        background-color:#fff;
        transform:translateY(120%);
        &.showContent {
            animation:showContent .3s ease-in both;
        }
        &.hideContent {
            animation:hideContent .3s ease-in both;
        }
        &_title {
            height:112rpx;
            padding:36rpx 24rpx 32rpx;
            text-align:center;
        }
        &_in {
            height:788rpx;
            max-height:788rpx;
            padding:0rpx 0rpx 120rpx;
            /* overflow-y:scroll; */
        }
        &_in_box {
            margin:24rpx 24rpx 0rpx;
        }
        &_footer {
            
        }
    }

/*  */
@keyframes showMask {
    0% {
       opacity:0; 
    }
    100% {
        opacity:1;
    }
}
@keyframes hideMask {
    0% {
       opacity:1; 
    }
    100% {
        opacity:0;
    }
}
/*  */
@keyframes showContent {
    0% {
       transform:translateY(120%); 
    }
    100% {
        transform:translateY(0%);
    }
}
@keyframes hideContent {
    0% {
       transform:translateY(0%); 
    }
    100% {
        transform:translateY(120%);
    }
}
}
</style>